﻿@{
    ViewBag.Title = "Personal expenses";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                This in a simple application to manage your expenses... Feel free to use it as you wish :-)
            </p>
        </div>
    </section>
}
<div id="loadingContainer">
    loading data...
</div>
<div id="expensesContainer" style="display:none">

    <h3>Manage your expenses</h3>

    <div id="insertingExpense" data-bind="visible: expenseToEdit.expenseRecordId().length == 0">
        <form data-bind="submit: addExpense">
            <div class="inline">
                <label>Title</label>
                <input data-bind='value: expenseToAdd.title, valueUpdate: "afterkeydown"' required />
            </div>
            <div class="inline">
                <label>Description</label>
                <input data-bind='value: expenseToAdd.description, valueUpdate: "afterkeydown"' required />
            </div>
            <div class="inline">
                <label>Cost</label>
                <input data-bind='value: expenseToAdd.cost, valueUpdate: "afterkeydown"' required />
            </div>
            <div class="inline">
                <label>Date (mm/dd/yyyy)</label>
                <input id="expenseToAddDatepicker" data-bind='value: expenseToAdd.date' required />
            </div>

            <br style="clear:both" />
            <div data-bind="visible: expenseToAdd.title().length > 0">
                <ul>
                    <li><span data-bind="text: expenseToAdd.title"></span> 
                        <span data-bind="visible: expenseToAdd.description().length > 0">
                            (<span data-bind="text: expenseToAdd.description"></span>)
                        </span> 
                        <span data-bind="visible: expenseToAdd.cost().length > 0">
                            : <span data-bind="text: expenseToAdd.cost"></span> €
                        </span>
                    </li>
                </ul>
            </div>

            <button type="submit">Add</button>
        </form>
    </div>

    <div id="editingExpense" data-bind="visible: expenseToEdit.expenseRecordId() > 0">
        <form data-bind="submit: saveExpense">

            <div class="inline">
                <label>Title</label>
                <input data-bind='value: expenseToEdit.title, valueUpdate: "afterkeydown"' required />
            </div>
            <div class="inline">
                <label>Description</label>
                <input data-bind='value: expenseToEdit.description, valueUpdate: "afterkeydown"' required />
            </div>
            <div class="inline">
                <label>Cost</label>
                <input data-bind='value: expenseToEdit.cost, valueUpdate: "afterkeydown"' required />
            </div>
            <div class="inline">
                <label>Date (mm/dd/yyyy)</label>
                <input id="expenseToAddDatepicker" data-bind='value: expenseToEdit.date' required />
            </div>

            <br style="clear:both" />
        
            <button type="submit">Save</button>
            <button data-bind="click: cancelEdit">Cancel</button>
        </form>
    </div>

    <h3>Your expenses:</h3>
    <ul data-bind="foreach: expenses">
        <li><span data-bind="edDateText: date"></span>-&gt; <span data-bind="text: title"></span> (<span data-bind="text: description"></span>): <span data-bind="text: cost"></span> € - 
            <a href="#" data-bind="click: $parent.editExpense">Edit</a>
            <a href="#" data-bind="click: $parent.removeExpense">Remove</a>
        </li>
    </ul>

    Total: <span data-bind="text: expensesSum"></span> €

    <h3>Your top expenses by title:</h3>
    <ol class="round" data-bind="foreach: titles">
        <li class="zero"><span data-bind="text: name"></span>-&gt; <span data-bind="text: cost"></span> € 
            @*<a href="#" data-bind="click: $parent.getTitleDetails">Details</a>*@
        </li>
    </ol>

</div>


@Scripts.Render("~/bundles/ko")
@Scripts.Render("~/bundles/expenses")